<template>
    <div class="headPhoto-box">
      <div class="tongxiang">{{$t('userAdmin.info.headPhoto.name')}}</div>
      <div class="el-upload">
        <el-tooltip effect="dark" :content="this.imageUrl==''?$t('userAdmin.info.headPhoto.tip01'):$t('userAdmin.info.headPhoto.tip02')" placement="right">
<!--          点击该区域，进行“上传”或“修改”头像-->
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-tooltip>
      </div>
    </div>
</template>

<script>
    export default {
        name: "UserAdminInfo-headPhoto",
        data() {
            return {
                imageUrl: '',
                baseURL:'http://localhost:8081/file/upload/',
                baseURL2:'http://localhost:8081/user/query'
            };
        },
        mounted(){
            this.axios.post(this.baseURL2).then(res=>{
                if (res.data==false){
                    this.$message.error(this.$t('userAdmin.info.headPhoto.photoGetFail'));
                }else {
                    this.imageUrl = res.data.userHeadPortrait
                }
            }).catch(
                exception=>[
                    console.log(exception)
                ]
            )
        },
        methods: {
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error(this.$t('userAdmin.info.headPhoto.illegalInfo01'));
                } else if (!isLt2M) {
                    this.$message.error(this.$t('userAdmin.info.headPhoto.illegalInfo02'));
                } else {
                    let forms = new FormData()
                    let configs = {
                        headers:{'Content-Type':'multipart/form-data'}
                    };
                    forms.append('file',file)
                    this.axios.post(this.baseURL,forms ,configs).then(res=>{
                        if (res.data==false){
                            this.failOpt(this.$t('userAdmin.info.headPhoto.optSuccess'))
                        }else {
                            this.imageUrl = res.data
                            this.successOpt(this.$t('userAdmin.info.headPhoto.optFail'))
                        }
                    }).catch(
                        exception=>{
                            console.log(exception)
                        }
                    )
                }
            },

            successOpt(message) {
                this.$notify({
                    title: this.$t('notify.success'),
                    message: message,
                    type: 'success'
                })
            },
            failOpt(message) {
                this.$notify.error({
                    title: this.$t('notify.error'),
                    message: message
                });
            }
        }
    }
</script>

<style scoped>
  .headPhoto-box{
    margin: 10px auto;
    /*width: 180px;*/
    width: 910px;
    /*height: 180px;*/
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgb(226, 226, 226);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    letter-spacing: 1px;
    padding: 10px 10px;
    /*background-color: #9d5f4a;*/
  }
  .tongxiang{
    float: left;
    width: 50px;
    margin-left: 15px;
    margin-top: 70px;
    text-align: center;
    line-height: 35px;
    font-size: 15px;
    color: rgb(80, 80, 80);
  }

  .el-upload {
    float: left;
    border: 1.5px dashed #d6d6d6;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background-color: #f5f5f5;
    margin-left: 80px;
  }
   .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
